<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
				list-style: none;
				text-decoration: none;
			}
			.header{
				width: 700px;
				height: 60px;
				margin: 100px auto 0;
				background-color: skyblue;
				border-radius: 5px;
				overflow: hidden;
			}
			.header ul li{
				float: left;
				width: 100px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				position: relative;
			}
			ul li a{
				/* color: #fff;
				z-index: 99; */
				position: relative;
				width: 100%;
				height: 100%;
				font-size: 24px;
				color: blue;
				text-align: center;
				line-height: 60px;
				text-decoration: none;
				z-index: 2;
			}
			span{
				position: absolute;
				width: 100px;
				height: 60px;
				background: greenyellow;
				left: 0;
				top: 60px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<ul>
				<li><a href="">hao123</a><span></span></li>
				<li><a href="">京东</a><span></span></li>
				<li><a href="">天猫</a><span></span></li>
				<li><a href="">苏宁易购</a><span></span></li>
				<li><a href="">聚划算</a><span></span></li>
				<li><a href="">淘宝</a><span></span></li>
				<li><a href="">哔哩哔哩</a><span></span></li>
			</ul>
			<div class="mp3">
				<audio src="mp3/A0.MP3" ></audio>
				<audio src="mp3/B1.MP3" ></audio>
				<audio src="mp3/C2.MP3" ></audio>
				<audio src="mp3/D3.MP3" ></audio>
				<audio src="mp3/E4.MP3" ></audio>
				<audio src="mp3/F5.MP3" ></audio>
				<audio src="mp3/G6.MP3" ></audio>
			</div>
		</div>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".header li").mouseenter(function(){
					$(this).children("span").stop().animate({top:0});
					//$("audio").eq()  jq对象
					//$("audio").get() js对象
					$("audio").get($(this).index()).load();
					$("audio").get($(this).index()).play();
				}).mouseleave(function(){
					$(this).children("span").stop().animate({top:60})
				})
				// $(".header li").keyup(function(ev){
				// 	if (ev.keyCode == 97) {
				// 		$(this).mouseenter()
				// 	}
				// })
			})
		</script>
	</body>
</html>
